<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
</head>
<body>
    <!-- 
        form 表单元素标签
        1.action 属性  设置提交地址，后台的url地址
        2.method 属性  设置提交方式,GET POST
            2.1 GET方式
                - 请求参数追加至地址栏 ?username=zhangsan&password=123456
                - 不适合提交私密数据；不适合提交数据量较大的情况
            2.2 POST方式
                - 地址栏未发生变化，请求参数携带至请求体中提交指定的url地址
                - 可以提交私密数据；可以提交数据量较大的情况
    -->
    <form action="#" method="post">
        <table border="1px" cellspacing="0" cellpadding="10px" align="center">
            <caption><h3>用户登录</h3></caption>
            <tr>
                <td>
                    <fieldset>姓名
                        <legend>必填项</legend>
                    </fieldset>
                </td>
                <!-- 
                    input 输入框标签
                    1.type 属性 设置输入框的类型  text 普通文本框
                    2.placeholder 属性          设置提示文本
                    3.class 属性                通过类名设置样式
                    4.name 属性 设置表单元素的提交名称
                    5.value 属性 设置默认值
                -->
                <td><input type="text" placeholder="请输入您的姓名" class="name" name="username" /></td>
            </tr>
            <tr>
                <td>密码</td>
                <!-- 
                    input 输入框标签
                    1.type 属性 设置输入框的类型  password 密码框
                    2.placeholder 属性          设置提示文本
                    3.class 属性                通过类名设置样式
                    4.name 属性 设置表单元素的提交名称
                -->
                <td><input type="password" placeholder="请输入您的密码" class="pwd" name="password" /></td>
            </tr>
            <tr>
                 <!-- 
                    input 输入框标签
                    1.type 属性 设置输入框的类型  submit提交按钮 reset重置按钮，清空表单
                    2.value 属性 设置按钮的文本
                -->
                <td colspan="2" align="center">
                    <input type="submit" value="登录" /> &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置" /> 
                </td>
            </tr>
        </table>
    </form>
</body>
</html>